/**
 * Created with JetBrains PhpStorm.
 * User: ishowshao
 * Date: 12-7-13
 * Time: 下午3:27
 */

/**
 * @class FlyFight.view.Chessboard
 * @extends Zen.View
 */
FlyFight.view.Chessboard = Zen.extend(Zen.View, {
    initView: function (config) {
        /**
         * @type {Object}
         * @private
         */
        this._config = config || {};
        this._grid = new FlyFight.view.Grid({
            x: 10,
            y: 10,
            cell: FlyFight.view.CELL_WIDTH_HEIGHT
        });
    },
    render: function (renderTo) {
        var that = this;
        this._grid.render(renderTo);
        this.el = this._grid.el;
        this.el.delegate('.grid-cell', 'click', function () {
            that.onCellClick.call(that, this);
        });
        if (this._config['droppable']) {
            this.el.droppable({
                drop: function (event, ui) {
                    var offset = ui.draggable.offset();
                    var x = offset.left - that.offset.left;
                    var y = offset.top - that.offset.top;

                    var top;
                    var left;

                    if (x < 0) {
                        left = that.offset.left + 1;
                    } else if (that.width - x < ui.draggable.width()) {
                        left = that.offset.left + that.width - ui.draggable.width();
                    } else {
                        left = that.offset.left + 1 + x - (x % (FlyFight.view.CELL_WIDTH_HEIGHT + 1));
                    }

                    if (y < 0) {
                        top = that.offset.top + 1;
                    } else if (that.height - y < ui.draggable.height()) {
                        top = that.offset.top + that.height - ui.draggable.height();
                    } else {
                        top = that.offset.top + 1 + y - (y % (FlyFight.view.CELL_WIDTH_HEIGHT + 1));
                    }
                    ui.draggable.offset({
                        left: left,
                        top: top
                    });
                }
            });
        }
        this.offset = this.el.offset();
        this.width = this.el.width();
        this.height = this.el.height();
        return this;
    },
    getOffset: function () {
        return this.el.offset();
    },
    onCellClick: function () {
        var that = this;
        var cellEl = jQuery(cell);
        console.log(cellEl.data('x'));
        console.log(cellEl.data('y'));
        if (this._config['fire']) {
            jQuery.ajax({
                url: 'server/fire.php',
                data: {
                    x: cellEl.data('x'),
                    y: cellEl.data('y')
                },
                success: function (data) {
                    var result = jQuery.parseJSON(data)['data'];
                    that.afterFire(result['status'], result['x'], result['y']);
                    console.log(data);
                }
            });
        }
    },
    afterFire: function (status, x, y) {
        var point = jQuery('<div style="width: 20px; height: 20px; position: absolute;"></div>');
        var color;
        if (status == 0) {
            jQuery('#request-info').append('请等待对方出击');
            return;
        } else if (status == 1) {
            color = 'green';
        } else if (status == 2) {
            color = 'blue';
        } else if (status == 3) {
            color = 'red';
        }
        jQuery('body').append(point);
        point.offset({
            top: this.offset['top'] + y * 21 + 1,
            left: this.offset['left'] + x * 21 + 1
        });
        point.css({
            'backgroundColor': color
        });
    }
});
